<template>
    <div class="quiz-container">
        <h2 class="quiz-title">手动组卷</h2>
      <!-- 答题进度 -->
      <div class="progress-bar">
        <div 
          class="progress" 
          :style="{ width: `${(currentQuestionIndex / questions.length) * 100}%` }"
        ></div>
      </div>
      
      <!-- 题目展示区域 -->
      <div v-if="!quizCompleted" class="question-container">
        <h2>第 {{ currentQuestionIndex + 1 }} 题 (共 {{ questions.length }} 题)</h2>
        <div class="question">{{ currentQuestion.text }}</div>
        
        <!-- 单选题选项 -->
        <div class="options">
          <div 
            v-for="(option, index) in currentQuestion.options" 
            :key="index"
            class="option"
            :class="{ 
              'selected': selectedAnswer === index,
              'correct': showAnswer && index === currentQuestion.correctAnswer,
              'incorrect': showAnswer && selectedAnswer === index && index !== currentQuestion.correctAnswer
            }"
            @click="selectAnswer(index)"
          >
            {{ String.fromCharCode(65 + index) }}. {{ option }}
          </div>
        </div>
        
        <!-- 操作按钮 -->
        <div class="actions">
          <button 
            v-if="currentQuestionIndex > 0"
            @click="prevQuestion"
            class="btn prev-btn"
          >
            上一题
          </button>
          
          <button 
            v-if="!showAnswer && currentQuestionIndex < questions.length - 1"
            @click="nextQuestion"
            class="btn next-btn"
            :disabled="selectedAnswer === null"
          >
            下一题
          </button>
          
          <button 
            v-if="!showAnswer && currentQuestionIndex === questions.length - 1"
            @click="submitQuiz"
            class="btn submit-btn"
            :disabled="selectedAnswer === null"
          >
            提交答案
          </button>
          
          <button 
            v-if="showAnswer && currentQuestionIndex < questions.length - 1"
            @click="nextQuestion"
            class="btn next-btn"
          >
            继续
          </button>
          
          <button 
            v-if="showAnswer && currentQuestionIndex === questions.length - 1"
            @click="showResults"
            class="btn submit-btn"
          >
            查看结果
          </button>
        </div>
      </div>
      
      <!-- 结果展示 -->
      <div v-else class="result-container">
        <h2>测验结果</h2>
        <div class="score">得分: {{ score }} / {{ questions.length }}</div>
        <div class="percentage">正确率: {{ ((score / questions.length) * 100).toFixed(1) }}%</div>
        
        <div class="question-results">
          <div 
            v-for="(question, index) in questions" 
            :key="index"
            class="question-result"
            :class="{ 'correct': questionResults[index], 'incorrect': !questionResults[index] }"
          >
            <h3>第 {{ index + 1 }} 题: {{ questionResults[index] ? '正确' : '错误' }}</h3>
            <p>{{ question.text }}</p>
            <p>你的答案: {{ getUserAnswer(index) }}</p>
            <p>正确答案: {{ getCorrectAnswer(index) }}</p>
          </div>
        </div>
        
        <button @click="restartQuiz" class="btn restart-btn">重新开始</button>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref, computed, onMounted } from 'vue';
  
  interface Question {
    id: number;
    text: string;
    options: string[];
    correctAnswer: number; // 单选题正确答案索引
  }
  
  interface QuizResult {
    [key: number]: boolean; // 题目索引 -> 是否正确
  }
  
  export default defineComponent({
    name: 'PaperGenerator',
    setup() {
      // 单选题数据
      const questions = ref<Question[]>([
        {
        id: 1,
        text: '函数 f(x) = x² 的导数是什么？',
        options: ['2x', 'x', 'x³/3', '1'],
        correctAnswer: 0 // 2x
      },
      {
        id: 2,
        text: '∫(3x²)dx 等于？',
        options: ['x³', 'x³ + C', '6x', '3x³ + C'],
        correctAnswer: 1 // x³ + C
      },
      {
        id: 3,
        text: 'lim(x→0) (sinx)/x 的极限值是？',
        options: ['0', '1', '∞', '不存在'],
        correctAnswer: 1 // 1
      },
      {
        id: 4,
        text: '函数 f(x) = eˣ 的导数是？',
        options: ['xeˣ', 'eˣ', 'lnx', '0'],
        correctAnswer: 1 // eˣ
      },
      {
        id: 5,
        text: '∫(1/x)dx 等于？',
        options: ['x²/2', 'ln|x| + C', '1/x²', '-1/x² + C'],
        correctAnswer: 1 // ln|x| + C
      }
      ]);
  
      // 当前题目索引
      const currentQuestionIndex = ref(0);
      // 选择的答案
      const selectedAnswer = ref<number | null>(null);
      // 是否显示正确答案
      const showAnswer = ref(false);
      // 测验是否完成
      const quizCompleted = ref(false);
      // 测验得分
      const score = ref(0);
      // 每道题的结果
      const questionResults = ref<QuizResult>({});
  
      // 当前题目
      const currentQuestion = computed(() => {
        return questions.value[currentQuestionIndex.value];
      });
  
      // 选择答案
      const selectAnswer = (index: number) => {
        if (!showAnswer.value) {
          selectedAnswer.value = index;
        }
      };
  
      // 下一题
      const nextQuestion = () => {
        if (showAnswer.value) {
          // 如果正在显示答案，则转到下一题并重置状态
          showAnswer.value = false;
          selectedAnswer.value = null;
          
          if (currentQuestionIndex.value < questions.value.length - 1) {
            currentQuestionIndex.value++;
          }
        } else {
          // 否则显示当前题的答案
          checkAnswer();
        }
      };
  
      // 上一题
      const prevQuestion = () => {
        if (currentQuestionIndex.value > 0) {
          currentQuestionIndex.value--;
          showAnswer.value = false;
          selectedAnswer.value = null;
        }
      };
  
      // 检查答案
      const checkAnswer = () => {
        const isCorrect = selectedAnswer.value === currentQuestion.value.correctAnswer;
        questionResults.value[currentQuestionIndex.value] = isCorrect;
        showAnswer.value = true;
      };
  
      // 提交测验
      const submitQuiz = () => {
        checkAnswer();
      };
  
      // 显示结果
      const showResults = () => {
        score.value = Object.values(questionResults.value).filter(Boolean).length;
        quizCompleted.value = true;
      };
  
      // 重新开始测验
      const restartQuiz = () => {
        currentQuestionIndex.value = 0;
        selectedAnswer.value = null;
        showAnswer.value = false;
        quizCompleted.value = false;
        score.value = 0;
        questionResults.value = {};
      };
  
      // 获取用户答案文本
      const getUserAnswer = (questionIndex: number) => {
        const question = questions.value[questionIndex];
        const userAnswer = questionResults.value[questionIndex];
        const answerIndex = userAnswer !== undefined ? 
          (userAnswer ? question.correctAnswer : selectedAnswer.value) : 
          null;
        return answerIndex !== null ? 
          `${String.fromCharCode(65 + answerIndex)}. ${question.options[answerIndex]}` : 
          '未回答';
      };
  
      // 获取正确答案文本
      const getCorrectAnswer = (questionIndex: number) => {
        const question = questions.value[questionIndex];
        return `${String.fromCharCode(65 + question.correctAnswer)}. ${question.options[question.correctAnswer]}`;
      };
  
      return {
        questions,
        currentQuestionIndex,
        currentQuestion,
        selectedAnswer,
        showAnswer,
        quizCompleted,
        score,
        questionResults,
        selectAnswer,
        nextQuestion,
        prevQuestion,
        submitQuiz,
        showResults,
        restartQuiz,
        getUserAnswer,
        getCorrectAnswer
      };
    }
  });
  </script>
  
  <style scoped>
  .quiz-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
  }
  
  .quiz-title {
    margin-top: -20px;
    margin-bottom: 100px;
    font-size: 24px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  .progress-bar {
    height: 10px;
    background-color: #f0f0f0;
    border-radius: 5px;
    margin-bottom: 20px;
  }
  
  .progress {
    height: 100%;
    background-color: #42b983;
    border-radius: 5px;
    transition: width 0.3s ease;
  }
  
  .question-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .question {
    font-size: 18px;
    margin: 20px 0;
    font-weight: bold;
  }
  
  .options {
    margin: 20px 0;
  }
  
  .option {
    padding: 12px 15px;
    margin: 8px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
  }
  
  .option:hover {
    background-color: #f5f5f5;
  }
  
  .option.selected {
    background-color: #e1f5fe;
    border-color: #4fc3f7;
  }
  
  .option.correct {
    background-color: #e8f5e9;
    border-color: #81c784;
  }
  
  .option.incorrect {
    background-color: #ffebee;
    border-color: #e57373;
  }
  
  .actions {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
  }
  
  .btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
  }
  
  .btn:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
  }
  
  .prev-btn {
    background-color: #f0f0f0;
    color: #333;
  }
  
  .prev-btn:hover {
    background-color: #e0e0e0;
  }
  
  .next-btn, .submit-btn {
    background-color: #42b983;
    color: white;
  }
  
  .next-btn:hover, .submit-btn:hover {
    background-color: #369f6b;
  }
  
  .restart-btn {
    background-color: #2196f3;
    color: white;
    margin-top: 20px;
  }
  
  .restart-btn:hover {
    background-color: #0d8aee;
  }
  
  .result-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .score {
    font-size: 24px;
    font-weight: bold;
    margin: 20px 0;
    color: #42b983;
  }
  
  .percentage {
    font-size: 20px;
    margin-bottom: 30px;
  }
  
  .question-results {
    margin-top: 30px;
  }
  
  .question-result {
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 4px;
  }
  
  .question-result.correct {
    background-color: #e8f5e9;
    border-left: 4px solid #81c784;
  }
  
  .question-result.incorrect {
    background-color: #ffebee;
    border-left: 4px solid #e57373;
  }
  </style>